<template>

    <z-paging ref="paging" class="content"  v-model="listData" @query="queryList">
    <view>
<!--      <uni-segmented-control :current="current" :values="items"-->
<!--                             @clickItem="onClickItem"-->
<!--                             styleType="button"-->
<!--                             activeColor="#007aff"/>-->
      <view class="timedata ">
        <uni-icons type="back" size="20" color="#333" @click="reduce"></uni-icons>
        <view class="timeDataContent">
          <text class="text-lg" style="color:#3b4144">
            {{ datedes }}
          </text>
        </view>
        <uni-icons type="forward" size="20" color="#333" @click="add"></uni-icons>

      </view>
    </view>

    <uni-list class="margin-top-lg">
      <uni-list-item v-for="(item,index) in listData" :key="index"  :rightText="item.ts">

        <template v-slot:header>
          <view class="flexrowcenter">
            <text class="text-sm">发生</text>
            <text :class="['text-sm', getFontColor(item.level)]" >{{levelDes(item.level)}}</text>
            <text class="text-sm" v-if="[0,1,2].includes(item.level)">{{handledes(item)}}</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    </z-paging>


</template>

<script>
import dayjs from 'dayjs';
import { buildingDeviceHistoryPage } from "@/api/devices/index"
export default {
  data() {
    return {
      // items: ['天', '周', '月'],
      current: 0,
      slaveName:'',
      deviceId:'',
      slaveId:'',
      propertyName:'',
      listData:[],
      datedes: dayjs().format('YYYY-MM-DD'),
      datevalue: dayjs(),
      dictMap : this.$store.state.dict.dictMap
    }
  },
  onLoad(query){
    console.log('setNavigationBarTitle>>',this.slaveName)

    const {deviceId,slaveId,slaveName,propertyName} = query || {}
    uni.setNavigationBarTitle({title:slaveName})
    this.deviceId = deviceId
    this.slaveId = slaveId
    this.slaveName = slaveName
    this.propertyName = propertyName

  },
  onNavigationBarButtonTap(object) {
    uni.navigateTo({
      url: '/pages/devices/detector-details/detector-details?deviceId='+this.deviceId+'&slaveId='+this.slaveId+'&propertyName='+this.propertyName
    })

  },
  methods: {
    getFontColor(level) {
      if (level === 2) {
        return 'text-orange';
      } else if (level === 1) {
        return 'text-red';
      } else {
        return 'text-black';
      }
    },
    handledes(item){
      let des1 = ''
      let des2 = `浓度值:${item.data}${item.propertyUnit}`
      return des1 + des2

    },
    queryList(pageNo,pageSize){
      if (pageNo == 1) {
        uni.showLoading({
          title: "请求中...",
        })
      }
      buildingDeviceHistoryPage({
        span:4,
        startTime:dayjs(this.datevalue).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime:dayjs(this.datevalue).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        size: pageSize,
        pages: pageNo,
        deviceId:this.deviceId,
        slaveId:this.slaveId
      }).then(res => {
        uni.hideLoading()
        const records = res.data.records || []; // 读取 records 数据
        this.$refs.paging.complete(records);


      })
    },
    levelDes(level){
      let label = ''
      const alarm_type =   this.dictMap?.alarm_type || []
      console.log(' this.dictMap?.alarm_type ', this.dictMap?.alarm_type )
      alarm_type.map(item=>{
        if(item.value == level){
          label = item.label
        }
      })
      return label
    },
    // onClickItem(data) {
    //   if (data.currentIndex === this.current) {
    //     return
    //   }
    //   this.datevalue = dayjs().format('YYYY-MM-DD')
    //   this.current = data.currentIndex
    //   console.log('this.datevalue>>>', this.datevalue)
    //   console.log('data.currentIndex>>', data.currentIndex)
    //   console.log('this.current>>', this.current)
    //
    //   if (data.currentIndex === 0) {
    //     this.datedes = dayjs(this.datevalue).format('YYYY-MM-DD')
    //   }
    //   if (data.currentIndex === 1) {
    //     const date1 = this.getstartOrEnd(this.datevalue, 'week', '1')
    //     const date2 = this.getstartOrEnd(this.datevalue, 'week', '2')
    //     this.datedes = date1 + '一' + date2
    //   }
    //   if (data.currentIndex === 2) {
    //     const date1 = this.getstartOrEnd(this.datevalue, 'month', '1')
    //     const date2 = this.getstartOrEnd(this.datevalue, 'month', '2')
    //     this.datedes = date1 + '一' + date2
    //   }
    // },
    // getstartOrEnd(time, datatype = 'week', type = '1') {
      // month
      //type 1 start
      //type 2 end
    //   let date = ''
    //   if (type === '1') {
    //     date = dayjs(this.datevalue).startOf(datatype).format('YYYY-MM-DD')
    //   }
    //   if (type === '2') {
    //     date = dayjs(this.datevalue).endOf(datatype).format('YYYY-MM-DD')
    //   }
    //   return date
    // },
    add() {
      console.log('this.datevalue>>add',dayjs(this.datevalue).format('YYYY-MM-DD'))
      if(dayjs().format('YYYY-MM-DD')  === dayjs(this.datevalue).format('YYYY-MM-DD') ){
          return
      }
      if (this.current === 0) {
        const datevalue = dayjs(this.datevalue).add(1, 'day')
        this.datedes = dayjs(this.datevalue).add(1, 'day').format('YYYY-MM-DD')
        this.datevalue = datevalue
      }

      this.$refs.paging.refresh()
      // if (this.current === 1) {
      //   const datevalue = dayjs(this.datevalue).add(1, 'week')
      //   const date1 = this.getstartOrEnd(datevalue, 'week', '1')
      //   const date2 = this.getstartOrEnd(datevalue, 'week', '2')
      //   this.datedes = date1 + '一' + date2
      //   this.datevalue = datevalue
      // }
      // if (this.current === 2) {
      //   const datevalue = dayjs(this.datevalue).add(1, 'month')
      //   const date1 = this.getstartOrEnd(datevalue, 'month', '1')
      //   const date2 = this.getstartOrEnd(datevalue, 'month', '2')
      //   this.datevalue = datevalue
      //   this.datedes = date1 + '一' + date2
      // }
    },
    reduce() {
      console.log('this.datevalue>>reduce',dayjs(this.datevalue).format('YYYY-MM-DD'))

      if (this.current === 0) {
        const datevalue = dayjs(this.datevalue).subtract(1, 'day')
        this.datedes = dayjs(this.datevalue).subtract(1, 'day').format('YYYY-MM-DD')
        this.datevalue = datevalue
        this.$refs.paging.refresh()
      }
      // if (this.current === 1) {
      //   const datevalue = dayjs(this.datevalue).subtract(1, 'week')
      //   const date1 = this.getstartOrEnd(datevalue, 'week', '1')
      //   const date2 = this.getstartOrEnd(datevalue, 'week', '2')
      //   this.datedes = date1 + '一' + date2
      //   this.datevalue = datevalue
      // }
      // if (this.current === 2) {
      //   const datevalue = dayjs(this.datevalue).subtract(1, 'month')
      //   const date1 = this.getstartOrEnd(datevalue, 'month', '1')
      //   const date2 = this.getstartOrEnd(datevalue, 'month', '2')
      //   this.datedes = date1 + '一' + date2
      //   this.datevalue = datevalue
      // }
    },
  }
}
</script>

<style scoped>
.content {
  height: 100%;
  background-color: #ffffff;
  padding-bottom: calc(var(--window-bottom) + 20px);
}



.timedata {
  display: flex;
  flex-direction: row;
  margin-top: 40 rpx;
  justify-content: center;
  align-items: center;
  flex: 1
  /*height: 100px*/
}

.timeDataContent {
  width: 500rpx;
  height:40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;

}
page{
  height: 100%;
}
</style>
